<template>
  <div>Home</div>
  <!-- 
    路由跳转两种方式： 
      路由链接导航 router-link
      编程式导航 this.$router.push
      使用场景：
        1. 如果只需要路由跳转，用router-link
        2. 如果要做一些其他事，在跳转，用编程式导航
          比如：登录、注册
  -->
  <router-link to="/about">go about</router-link>
  <router-link :to="{ name: 'About' }">go about</router-link>

  <p>{{ count }}</p>
  <button @click="setCount(1)">按钮</button>

  <el-button type="primary" size="mini" icon="el-icon-plus">按钮</el-button>
  <ElButton type="primary" size="mini" icon="el-icon-plus">按钮</ElButton>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { ElButton } from "element-plus";

export default {
  name: "Home",
  computed: {
    // user vuex模块名称
    /*
      mapState() 返回值
        {
          count: function(state) {
            return state.user.count
          }
        }
    */
    ...mapState("user", ["count"]),
    // ...mapState({
    //   count: (state) => state.user.count,
    // }),
  },
  methods: {
    ...mapActions("user", ["setCount"]),
  },
  components: {
    ElButton,
  },
};
</script>

<style scoped></style>
